<template>
	<view class="comAll" v-if="fliePassVisible" @click="cancel">
		<view class="content" @click.stop>
			<view class="tip">
				<view class="tipTitle">
					<text>请输入文件确认密码</text>
				</view>
				<view class="tipInput">
					<view class="virtualInput" @click="getFocus">
						<view v-for="item in password" :key="item">
							{{item}}
						</view>
					</view>
					<input style="position: absolute;z-index: 0;" class="test" type="number" v-model="inputValue" @blur="inputBlur" @input="getInput" :focus="inputFocus" maxlength="6"/>
				</view>
				<view class="tipButton">
					<navigator url="../../message/editFilePwdVer/editFilePwdVer?back=true">忘记密码？</navigator>
				</view>
			</view>
			<view class="bottomBtn">
				<button @click="cancel" hover-class="subActive">
					<view class="btnIcon"></view>
				</button>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		props:{
			fliePassVisible:Boolean
		},
		data() {
			return {
				result:'',
				inputFocus:true,
				inputValue: '',
				password:[
					'',
					'',
					'',
					'',
					'',
					''
				],
			}
		},
		methods:{
			inputBlur() {
				this.inputFocus = false
			},
			getInput(event) {
				const length = event.target.value.length
				for (let i = 0; i < 6; i++) {
					if (i > length) {
						this.password[i] = ''
					} else {
						this.password[i] = event.target.value.substring(i,i+1)
					}
				}
				
				if(length === 6){
					setTimeout(()=>{
						this.submit()
					}, 200)
				}
			},
			getFocus(){
				this.inputFocus = true
			},
			submit() {
				this.$emit('submitPass', this.inputValue)
				uni.showTabBar({
					
				})
				this.inputValue = ''
				for (let i = 0; i < 6; i++) {
					this.password[i] = ''
				}
			},
			cancel() {
				this.$emit('cancelPass')
				uni.showTabBar({
					
				})
				this.inputValue = ''
				for (let i = 0; i < 6; i++) {
					this.password[i] = ''
				}
			},
		},
		watch:{
			fliePassVisible(to, from){
				this.inputFocus = to
			},
		}
	}
</script>

<style scoped>
	.comAll{
		position: fixed;
		height:100%;
		padding: 17upx;
		top:0;
		bottom: 0;
		left: 0;
		right: 0;
		background-color: rgba(0,0,0,0.65);
		display: flex;
		z-index: 100;
	}
	/* 背景虚化  */
	.comAll:after{
		filter: blur(20px);
		-webkit-filter: blur(20px);  /* Chrome, Safari, Opera */
	}
	.content{
		margin: auto 0;
		width:100%;
	}
	.tip{
		height: 289.33upx;
		background-position: center;
		background-repeat: no-repeat;
		background-size: cover;
		padding: 17upx;
		border-radius: 10upx;
		background-color: #fdf5f3;
	}
	.tipTitle{
		font-size:36upx;
		color:#333333;
		font-weight: bold;
		text-align: center;
		letter-spacing: 15upx;
		padding: 20upx 0;
	}
	.tipInput{
		font-size: 24upx;
		display: flex;
		padding: 30upx 0 10upx 0;
	}
	.virtualInput{
		display: flex;
		flex-wrap: nowrap;
		justify-content: center;
		width: 100%;
	}
	.virtualInput view{
		border-top: 1upx solid #f7533e;
		border-bottom: 1upx solid #f7533e;
		border-left: 1upx solid #f7533e;
		width:79.33upx;
		height:78upx;
		background-color: #FFF;
		font-size: 36upx;
		color:#333333;
		text-align: center;
		line-height: 78upx;
	}
	.virtualInput view:last-child{
		border-right: 1upx solid #f7533e !important;
	}
	.plaClass{
		color:#d6afaf !important;
		font-size: 24upx;
	}
	.tipButton{
		padding: 20upx 0;
		text-align: center;
	}
	.tipButton navigator{
		letter-spacing: 10upx;
		font-size: 32upx;
		color:#6d6d6d;
	}
	.bottomBtn {
		margin-top: 40upx;
	}
	.bottomBtn button{
		width:49.33upx;
		height:55upx;
		background-color: #FFF;
	}
	.btnIcon:before,
	.btnIcon:after {
		content: "";
		position: absolute;
		background: #ca4837;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%) rotate(45deg);
	}
	
	.btnIcon:before {
		width: 55upx;
		height: 7upx;
		border-radius: 10upx;
	}
	
	.btnIcon:after {
		width: 7upx;
		height: 55upx;
		border-radius: 10upx;
	}
	.subActive{
		background-color: #FFC8C7 !important;
	}
	.test{
		background-color: #66CCFF;
		display: inline-block;
		width:0;
		height:0;
	}
</style>
